// 自定义连接线组件 PipelineEdge.vue
<template>
  <path
    class="pipeline-edge"
    :d="pathData"
    stroke-width="5"
    stroke-dasharray="5,3"
    marker-end="url(#arrowhead)"
  ></path>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  points: [number, number][]
  arrow?: boolean
}

const props = defineProps<Props>()

const pathData = computed(() => {
  return props.points.map(([x, y], i) => 
    `${i === 0 ? 'M' : 'L'} ${x} ${y}`
  ).join(' ')
})
</script>

<style scoped>
.pipeline-edge {
  stroke: #1890ff;
  fill: none;
  animation: flow 1s linear infinite;
}
@keyframes flow {
  to { stroke-dashoffset: -8 }
}
</style>
